import { Component } from 'react'

// 声明不同的组件名
let scaleObj: Iscale = {
    c: '摄氏度',
    f: '华氏度'
}

// 类型
type Iprops = {
    scale: string
    temperature: string
    onTemperatureChange: (t: string) => void
}
class TemperatureInput extends Component<Iprops, any>{
    // 组件受控
    handelChange = (e: any) => {
        console.log(e.target.value)
        this.props.onTemperatureChange(e.target.value)
    }
    render() {
        // 解构temperature,scale属性
        let { scale, temperature } = this.props
        return (
            <fieldset>
                <legend>{scaleObj[scale]}</legend>
                <input type="text" value={temperature} onChange={this.handelChange} />
            </fieldset>
        )
    }
}

export default TemperatureInput